<template>
  <link rel="stylesheet" href="/assets/css/coupon.css" />
  <div class="headerbox">
    <div class="header">
      <div class="headerL">
        <a onclick="javascript:history.back(-1)" class="goback"
          ><img src="/assets/images/goback.png"
        /></a>
      </div>
      <div class="headerC">
        <p>优惠券列表</p>
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="h50"></div>
  <van-tabs v-model:active="active" @click-tab="changeTab">
    <van-tab value="0" title="全部"></van-tab>
    <van-tab title="未使用" value="1"></van-tab>
    <van-tab title="已使用" value="2"></van-tab>
    <van-tab title="已失效" value="3"></van-tab>
  </van-tabs>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      class="coupon_list"
      v-model:loading="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="load"
    >
      <div class="coupon_item" v-for="(item, index) in list" :key="index">
        <div class="item_content">
          <a href="coupon-info.html">
            <div class="left">{{ item.coupon.rate * 100 }}<span>折</span></div>
            <div class="right">
              <div>{{ item.coupon.title }}</div>
              <div>
                凭此券，购买可享<span class="num">{{
                  item.coupon.rate * 100
                }}</span
                >折
              </div>
              <div>开始时间：{{ item.coupon.createtime_text }}</div>
              <div>失效时间：{{ item.coupon.endtime_text }}</div>
            </div>
          </a>
        </div>

        <div class="item_btn">
          <button class="apply_btn" v-if="item.status && !item.coupon.status">
            已失效
          </button>
          <button class="right_btn" v-else-if="item.status" @click="gobuy">
            使用
          </button>
          <button class="apply_btn" v-else>已使用</button>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";

const { proxy } = getCurrentInstance();
const business = proxy.$business.value;

const count = ref(0)
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

let activetab = ref(0); //选中标签

//标签
const active = ref(0);

//生命周期
onMounted(async () => {
  load();
});

//加载
const load = async () => {
  if (refreshing.value) {
    list.value = [];
    refreshing.value = false;
  }

  var result = await proxy.$POST({
    url: "business/coupon",
    params: { busid: business.id },
  });
  //请求发送完毕后，加载状态也就完毕了
  loading.value = false;

  if (result.code == 0) {
    proxy.$fail(result.msg);
    finished.value = true;
    return false;
  }

  result.data.list.map((item) => {
    item.status = item.status == "1" ? true : false;
    item.coupon.status = item.coupon.status == "1" ? true : false;
  });

  //判断选择项
  if (activetab.value == 0) {
    //全部
    list.value = result.data.list;
  } else {
    list.value = [];
    result.data.list.forEach((item) => {
      switch (activetab.value) {
        case 1: {
          if (item.coupon.status && item.status) {
            list.value.push(item);
          }
          break;
        }
        case 2: {
          if (!item.status) {
            list.value.push(item);
          }
          break;
        }
        case 3: {
          if (item.status && !item.coupon.status) {
            list.value.push(item);
          }
          break;
        }
      }
    });
  }

  // 加载状态结束
  loading.value = false;
  //结束
  finished.value = true;
};

// 刷新
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  load();
};

//使用优惠券按钮
const gobuy = () => {
  proxy.$router.push("/product/index");
};

//切换标签页
const changeTab = ({ title }) => {
  switch (title) {
    case "全部": {
      activetab.value = 0;
      break;
    }
    case "未使用": {
      activetab.value = 1;
      break;
    }
    case "已使用": {
      activetab.value = 2;
      break;
    }
    case "已失效": {
      activetab.value = 3;
      break;
    }
  }

  onRefresh();
};
</script>